<!-- eslint-disable vue/multi-word-component-names -->
<!-- 课程表 -->
<template>
  <div class="ked1">
    <!-- 课程表数据 -->
    <el-card class="box-card" style="min-height:80vh;width:90%" v-if="classicCourseList && classicCourseList.length !== 0">
      <div class="ec" v-for="classicCoursess in classicCourseList" :key="classicCoursess.id">
        <div style="width:100%;height:90px" >
          <div class="ec1">
              <span>{{classicCoursess.updateTime}}</span>
            </div>
            <div class="ec2"  @click="routerCourseVideo(classicCoursess)">
              <el-image style="width:140px ;height: 80px" :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + classicCoursess.courseImg"></el-image>
            </div>
            <div class="ec3">
              <div style=""><span style="margin-left:10px">{{classicCoursess.courseTitle}}</span></div>
              <div style="" class="ec1-d"><span>{{classicCoursess.courseClick}}</span></div>
              <div style="" class="ec1-d"><span>该课程点击量</span></div>

            </div>
          </div>
        <el-divider></el-divider>
      </div>
    </el-card>
    <!-- 空状态 -->
    <el-card class="card-wrapper" v-else>
      <div class="content-wrapper">
        <i class="el-icon-warning-outline"></i>
        <span class="message">暂无学习安排，去找些<span style="color:rgb(63, 185, 103);" class="span111" @click="routerHomes">感兴趣的课程</span>吧！</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uid: {}, // 用户信息
      classicCourseList: []

    }
  },
  mounted () {
    // this.courstData = JSON.parse(this.$route.query.roid) // 课程信息
    this.uid = JSON.parse(localStorage.getItem('user')).data
    // 精品课查询方法
    this.getPurchasedCourse()
  },

  methods: {
    routerHomes () {
      this.$router.push('/homes')
    },
    routerCourseVideo (classicCoursess) {
      this.$router.push({
        path: '/courseVideo',
        query: {
          roid: JSON.stringify(classicCoursess)
        }
      })
    },
    // 已购课程
    getPurchasedCourse () {
      this.$axios
        .get('/MemberManagerPc/getPurchasedCourse', {
          params: {
            uid: this.uid.id
          }
        })
        .then((res) => {
          if (res.data.data.code === 200) {
            this.classicCourseList = res.data.data.data
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style>
.card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  width: 90%;
}
.span111:hover {
  /* 鼠标移入后的样式 */
  cursor: pointer;
}
.content-wrapper {
  display: flex;
  align-items: center;
}

.el-icon-warning-outline {
  font-size: 30px;
  margin-right: 10px;
}

.message {
  font-size: 20px;
}
.ked1{
  text-align: left;
}
.ec2{
  float:left;
  margin-left:60px;
  cursor: pointer;
}
.ec1{
  float:left;
  margin-top: 30px;
  font-size: 12px;
  color: #99a2aa;
  ;
}
.ec3{
  margin-left:40px;
  margin-top: 10px;
  float:left;
  font-size: 13px;
}
.ec4{
  margin-left:20px;
  margin-top: 30px;
  float:right;
  font-size: 14px;
  color: #99a2aa;
  ;
}
.ec{
  padding: 20px;
}
.ec1-d{
  border-right:solid 1px #ccc;
  margin-top:30px;
  padding-right:10px;
  padding-left:10px;
  font-size: 12px;
  color: #99a2aa;
  float:right
}
  .box-card {
  margin: 0 auto;
  border-radius: 10px;
  }
</style>
